<template>
    <div class="login-page">
        <el-card>
            <!-- 具名插槽 -->
            <template v-slot:header>面经运营后台</template>
            <template #default>
                <!-- 表单的基本结构 -->
                <!--
                    el-form 整个表单组件最外层
                    el-form-item 每一行，里面包含我们的表单控件

                <el-form >
                    <el-form-item>
                        -- 表单控件 --
                        -- Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker --
                        ....这里放
                    </el-form-item>
                </el-form>
            -->

                <el-form ref="myForm" :model="form" :rules="rules">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="form.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码"  prop="password">
                        <el-input type="password" v-model="form.password"></el-input>
                    </el-form-item>
                    <el-form-item class="tc">
                        <el-button type="primary" @click="goLogin">登录</el-button>
                        <el-button @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </el-card>
    </div>

  </template>

<script>
// 1. el-form 整个form组件
//        :model = "form"  => 最后发送请求，收集需要的数据
//               :model 绑定一个对象，对象中每个属性和表单元素双向绑定
//        :rules = "rules"  ==> rules对象，里面有需要校验的字段
// 2. el-form-item 表单域  一行，内部放各种表单元素
//        prop="rules中的配置的校验字段"
// 3. el-input 输入框
//       v-model 内部的input双向绑定
import { login } from '@/api/user.js'
export default {
  name: 'LoginIndex',
  data () {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        //   prop 写在 form-item上的，和这里的键名对应
        username: [
          // trigger触发方式，就这两个
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 5, max: 11, message: '长度在 5 到 11 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          //   \w  单词字符  数字字母下划线  a-zA-Z0-9_
          //   \d  数字字符  0-9

          // 量词   ===> 只作用于前一个字符 ！！！
          //  {n}  具体多少个
          //  {m,} 大于多少个  [m,+++)
          //  {m,n}  [m,n] 两边都是闭区间

          // 字符组  [] , 只能选一个出来
          // () 分组

          // ^  $, 两个一起加，必须精确匹配
          { pattern: /^\w{5,11}$/, message: '请输入 5 到 11 位的密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async goLogin () {
      // 对整个表单进行校验
      try {
        // validate方法返回一个promise
        await this.$refs.myForm.validate()
        // console.log('校验通过，发送请求的逻辑在这里写~')
        const { data } = await login(this.form)
        this.$store.commit('user/setUserToken', data.token)
        // 存了token之后，跳到首页去
        this.$router.push('/')
      } catch (err) {
        console.log(err)
      }
      // async await 一般需要搭配try-catch一起使用
    },
    // 重置表单
    resetForm () {
      this.$refs.myForm.resetFields()
    }
  }
}
</script>
<!-- 怎么给组件加样式
1. 直接给组件加类名, 写在标签上

2. 组件标签名，默认都有一个和标签名一样的类名，可以直接用这个类名
==> element-ui 在封装组件的时候，自己定义好的

3. 注意什么时候，自己单独加类名
-->

<!-- scoped 让样式只作用域当前组件 -->
<!-- 可以去掉scoped吗？不可以，去掉了之后，样式全局了，会污染全局环境 -->
<style lang="scss" scoped>.login-page {
    min-height: 100vh;
    background: url(@/assets/login-bg.svg) no-repeat center / cover;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .el-card {
      width: 420px;
      :deep(.el-card__header) {
        height: 80px;
        background: rgba(114,124,245,1);
        text-align: center;
        line-height: 40px;
        color: #fff;
        font-size: 18px;
      }
    }
    .el-form {
      padding: 0 20px;
    }
    .tc {
      text-align: center;
    }
  }

//   水平垂直居中
// 1. flex布局
// 2. absolute(子绝父相) + top/left 50% + 负margin；
// 3. absolute + top/left 50% + transform(-50%,-50%)
// 4. absolute + top/left/right/bottom + margin:auto;
// 5. absolute + calc()
// 6. grid
</style>
